---
import Layout from '../../../../layouts/Layout.astro';
import ProductPriceSection from '../../../../components/ProductPriceSection.tsx';
import Breadcrumb from '../../../../components/Breadcrumb.astro';
import UspStrip from '../../../../components/UspStrip.astro';
import { getBrandBySlugFromDB, getModelsByBrand, getColorsByModel, getProductsByModelAndColor, getProductIdsOffersLastUpdated } from '../../../../lib/products';

const { slug, model: modelSlug, color: colorSlug } = Astro.params;

// Resolve brand
const dbBrand = await getBrandBySlugFromDB(slug!);
if (!dbBrand) return Astro.redirect('/merken');
const brandName = dbBrand.name;

// Resolve model
const models = await getModelsByBrand(slug!);
const modelInfo = models.find(m => m.slug === modelSlug);
if (!modelInfo) return Astro.redirect(`/merken/${slug}`);
const modelName = modelInfo.name;

// Get all colors for swatch navigation
const allColors = await getColorsByModel(slug!, modelName);
const currentColor = allColors.find(c => c.slug === colorSlug);
if (!currentColor) {
  // If color not found, redirect to model page
  return Astro.redirect(`/merken/${slug}/${modelSlug}`);
}

// Get products for this specific color
const products = await getProductsByModelAndColor(slug!, modelName, colorSlug!);
if (products.length === 0) return Astro.redirect(`/merken/${slug}/${modelSlug}`);

// Use the most popular product as the "hero"
const hero = products[0];

// Combine all offers from all products with this color
const allOffers = products.flatMap(p => p.offers);
const allSizes = [...new Set(products.flatMap(p => p.sizes))].sort((a, b) => parseFloat(a) - parseFloat(b));
const lowestPrice = Math.min(...products.map(p => p.lowestPrice));
const highestOriginal = Math.max(...products.map(p => p.originalPrice));
const shopCount = allOffers.filter(o => o.inStock).length;
const discount = highestOriginal > lowestPrice
  ? Math.round(((highestOriginal - lowestPrice) / highestOriginal) * 100)
  : 0;

const colorName = currentColor.name;
const fullName = `${brandName} ${modelName} ${colorName}`;
const title = `${fullName} kopen? Vergelijk ${shopCount} ${shopCount === 1 ? 'winkel' : 'winkels'} vanaf €${lowestPrice.toFixed(2).replace('.', ',')} | SneakerPicks`;
const description = `${fullName} prijzen vergelijken bij ${shopCount} Nederlandse webshops. Laagste prijs: €${lowestPrice.toFixed(2).replace('.', ',')}. Vind de beste deal.`;
const canonicalUrl = `https://sneakerpicks.nl/merken/${slug}/${modelSlug}/${colorSlug}`;

const productIds = products.map(p => Number(p.id));
const offersLastUpdated = await getProductIdsOffersLastUpdated(productIds);
const dateModifiedIso = (offersLastUpdated ?? new Date()).toISOString();
const priceValidUntilIso = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
const merchantReturnPolicy = {
  "@type": "MerchantReturnPolicy",
  applicableCountry: "NL",
  returnPolicyCategory: "https://schema.org/MerchantReturnFiniteReturnWindow",
  merchantReturnDays: 14,
  returnMethod: "https://schema.org/ReturnByMail",
  returnFees: "https://schema.org/FreeReturn",
};

// JSON-LD Product schema
const productLd = {
  "@context": "https://schema.org",
  "@type": "Product",
  "inLanguage": "nl-NL",
  "name": fullName,
  "description": description,
  "url": canonicalUrl,
  ...(hero.image ? { "image": hero.image } : {}),
  "brand": { "@type": "Brand", "name": brandName },
  "dateModified": dateModifiedIso,
  "publisher": {
    "@type": "Organization",
    "name": "SneakerPicks",
    "url": "https://sneakerpicks.nl",
    "logo": { "@type": "ImageObject", "url": "https://sneakerpicks.nl/logo.svg" }
  },
  "offers": {
    "@type": "AggregateOffer",
    "lowPrice": lowestPrice > 0 ? lowestPrice : undefined,
    "highPrice": allOffers.length > 0 ? Math.max(...allOffers.map(o => o.price)) : undefined,
    "priceCurrency": "EUR",
    "offerCount": shopCount || 1,
    "availability": shopCount > 0 ? "https://schema.org/InStock" : "https://schema.org/OutOfStock",
    "priceValidUntil": priceValidUntilIso,
    "hasMerchantReturnPolicy": merchantReturnPolicy,
    "offers": allOffers.filter(o => o.inStock).slice(0, 10).map(o => ({
      "@type": "Offer",
      "price": o.price,
      "priceCurrency": "EUR",
      "availability": "https://schema.org/InStock",
      "url": o.url,
      "priceValidUntil": priceValidUntilIso,
      "hasMerchantReturnPolicy": merchantReturnPolicy,
      "seller": { "@type": "Organization", "name": o.shop },
    }))
  }
};

const breadcrumbLd = {
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "inLanguage": "nl-NL",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://sneakerpicks.nl/" },
    { "@type": "ListItem", "position": 2, "name": "Merken", "item": "https://sneakerpicks.nl/merken" },
    { "@type": "ListItem", "position": 3, "name": brandName, "item": `https://sneakerpicks.nl/merken/${slug}` },
    { "@type": "ListItem", "position": 4, "name": modelName, "item": `https://sneakerpicks.nl/merken/${slug}/${modelSlug}` },
    { "@type": "ListItem", "position": 5, "name": colorName, "item": canonicalUrl }
  ]
};

const sneakerData = {
  item_id: hero.id,
  item_name: fullName,
  item_brand: brandName,
  price: lowestPrice,
};
---

<Layout title={title} description={description}>
  <script type="application/ld+json" set:html={JSON.stringify(productLd)} />
  <script type="application/ld+json" set:html={JSON.stringify(breadcrumbLd)} />

  <section class="mx-auto max-w-7xl px-4 py-12 sm:px-6">
    <Breadcrumb items={[
      { label: 'Home', href: '/' },
      { label: 'Merken', href: '/merken' },
      { label: brandName, href: `/merken/${slug}` },
      { label: modelName, href: `/merken/${slug}/${modelSlug}` },
      { label: colorName },
    ]} />

    <div class="grid gap-12 lg:grid-cols-2">
      <!-- Image -->
      <div class="relative overflow-hidden rounded-3xl border border-border/50 bg-bg-card">
        {discount > 0 && (
          <div class="absolute left-4 top-4 z-10 rounded-full bg-deal px-3 py-1.5 text-sm font-bold text-white">
            -{discount}%
          </div>
        )}
        <div class="aspect-square p-8 sm:p-12">
          <img
            src={`/api/img/${hero.id}`}
            srcset={`/api/img/${hero.id}?w=400 400w, /api/img/${hero.id} 600w`}
            sizes="(max-width: 640px) 90vw, 50vw"
            alt={fullName}
            width="600"
            height="600"
            class="h-full w-full object-contain"
            loading="eager"
            fetchpriority="high"
            decoding="async"
            onerror="this.style.display='none'"
          />
        </div>
      </div>

      <!-- Info -->
      <div>
        <p class="text-xs font-bold uppercase tracking-[0.2em] text-accent">{brandName}</p>
        <h1 class="mt-2 text-3xl font-black tracking-tight sm:text-4xl">{brandName} {modelName}</h1>
        <p class="mt-1 text-text-secondary">{colorName}</p>

        <div class="mt-4 flex items-baseline gap-3">
          <span class="text-3xl font-black text-accent">€{lowestPrice.toFixed(2).replace('.', ',')}</span>
          {highestOriginal > lowestPrice && (
            <span class="text-lg text-text-muted line-through">€{highestOriginal.toFixed(2).replace('.', ',')}</span>
          )}
        </div>

        <p class="mt-1 text-sm text-text-muted">
          {shopCount} {shopCount === 1 ? 'winkel' : 'winkels'} · {allSizes.length} {allSizes.length === 1 ? 'maat' : 'maten'} beschikbaar
        </p>

        <!-- Color swatches -->
        {allColors.length > 1 && (
          <div class="mt-6">
            <h3 class="mb-3 text-xs font-bold uppercase tracking-widest text-text-muted">
              {allColors.length} kleuren beschikbaar
            </h3>
            <div class="flex flex-wrap gap-2">
              {allColors.map(color => {
                const isActive = color.slug === colorSlug;
                return (
                  <a
                    href={`/merken/${slug}/${modelSlug}/${color.slug}`}
                    class:list={[
                      'group relative flex flex-col items-center rounded-xl border-2 p-1.5 transition-all',
                      isActive
                        ? 'border-accent bg-accent/5'
                        : 'border-border/50 hover:border-accent/50 bg-bg-card'
                    ]}
                    title={color.name}
                  >
                    <div class="h-14 w-14 overflow-hidden rounded-lg bg-bg-elevated sm:h-16 sm:w-16">
                      {color.image ? (
                        <img
                          src={color.image}
                          alt={color.name}
                          class="h-full w-full object-contain p-1"
                          width="56"
                          height="56"
                          loading="lazy"
                          decoding="async"
                        />
                      ) : (
                        <div class="flex h-full w-full items-center justify-center text-xs text-text-muted">
                          {color.name.slice(0, 3)}
                        </div>
                      )}
                    </div>
                    <span class:list={[
                      'mt-1 max-w-[4.5rem] truncate text-center text-[10px] leading-tight',
                      isActive ? 'font-bold text-accent' : 'text-text-muted group-hover:text-text'
                    ]}>
                      {color.name}
                    </span>
                  </a>
                );
              })}
            </div>
          </div>
        )}

        <!-- Offers -->
        <div class="mt-8">
          <h2 class="mb-4 text-lg font-bold">Prijzen vergelijken</h2>
          <ProductPriceSection
            client:load
            offers={allOffers}
            lowestPrice={lowestPrice}
            sizes={allSizes}
            productId={hero.id}
            sneakerData={sneakerData}
          />
        </div>
      </div>
    </div>
  </section>

  <UspStrip variant="compact" class="pb-8" />

  <!-- Individual product listings (when multiple products share this color) -->
  {products.length > 1 && (
    <section class="mx-auto max-w-7xl px-4 pb-16 sm:px-6">
      <h2 class="mb-6 text-xl font-bold text-text-secondary">
        {products.length} varianten van {brandName} {modelName} {colorName}
      </h2>
      <div class="space-y-4">
        {products.map(product => (
          <a
            href={`/sneakers/${product.slug}`}
            class="flex items-center gap-4 rounded-2xl border border-border/50 bg-bg-card p-4 transition-colors hover:border-accent/30"
          >
            <div class="h-16 w-16 flex-shrink-0 overflow-hidden rounded-xl bg-bg-elevated">
              <img
                src={`/api/img/${product.id}`}
                alt={product.displayName || product.name}
                class="h-full w-full object-contain p-1"
                width="64"
                height="64"
                loading="lazy"
                decoding="async"
              />
            </div>
            <div class="min-w-0 flex-1">
              <p class="truncate font-bold text-text">{product.displayName || product.name}</p>
              <p class="text-sm text-text-muted">
                vanaf €{product.lowestPrice.toFixed(2).replace('.', ',')} · {product.offers.filter(o => o.inStock).length} {product.offers.filter(o => o.inStock).length === 1 ? 'winkel' : 'winkels'}
              </p>
            </div>
            <span class="text-accent">→</span>
          </a>
        ))}
      </div>
    </section>
  )}
</Layout>